<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv='X-UA-Compatible' content='chrome=1' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <title>login</title>
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/login.css">
    <!--[if gte IE 9]>
    <script src='assets/libs/jquery.js'  type="text/javascript"></script>
    <script src="assets/libs/flexie.js"  type="text/javascript"></script>
    <![endif]-->
    <!--[if IE 9]>
    <style>
        #main li.active{
            top: 2px;
        }
    </style>
    <link rel="stylesheet" href="static/css/ie9_login.css">
    <![endif]-->

</head>
<body>
    <section>
        <div id="border">
            <div id="main">
                <ul class="tip_list">
                    <li class="tip"><a href="#login">登录</a></li>
                    <li class="tip"><a href="#regist">注册</a></li>
                </ul>
                <form>
                    <!-- 注册 -->
                    <div id='regist'>
                        <div class='input_border phone_num'>
                            <input type="text" placeholder="手机号">
                        </div>
                        <div class='input_yzm'>
                            <div class='input_border yzm'>
                                <input type="text" placeholder="验证码">
                            </div>
                            <p class='yzm_btn'>发送验证码</p>
                        </div>
                        <div class='input_border pwd'>
                            <input  type="password" name="password" placeholder="6-20位密码，区分大小写">
                        </div>
                        <div class='check_box'>
                            <div class='check_box_btn'>
                                <i class='check_box_btn_logo'></i>
                            </div>
                            <span class='check_box_text'>我已阅读并接受<a href="#">用户协议</a></span>
                        </div> 
                        <p class='btn'>注册</p>
                        <!-- 第三方账号注册 -->
                        <div class='dsf'>
                            <p class='dsf_text'>用第三方账号注册</p>
                            <ul class='dsf_logo_list'>
                                <li class='dsf_logo dsf_qq'></li>
                                <li class='dsf_logo dsf_weibo'></li>
                                <li class='dsf_logo dsf_wechat'></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 登录 -->
                    <div id='login'>
                        <div class='input_border phone_num'>
                            <input type="text" placeholder="手机号">
                        </div>
                        <div class='input_border login_pwd'>
                            <input type="text" placeholder="输入密码，区分大小写">
                        </div>
                        <p class='forget_pwd'><a href="#">忘记密码</a></p>
                        <p class='btn'>登录</p>
                        <!-- 第三方账号注册 -->
                        <div class='dsf'>
                            <p class='dsf_text'>用第三方账号登录</p>
                            <ul class='dsf_logo_list'>
                                <li class='dsf_logo dsf_qq'></li>
                                <li class='dsf_logo dsf_weibo'></li>
                                <li class='dsf_logo dsf_wechat'></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script src='assets/libs/jquery.js'></script>
    <script>
        $(function(){

            /*
                进页面时 接受参数 选择显示登录/注册
            */
            var href = window.location.href;
            var hrefINdex = href.indexOf('=');
            var showID = href.substring(hrefINdex+1);
            if(showID == 1){
                $('#login').addClass('active')
                $('a[href=#login]').parent().addClass('active')

            }
            if(showID == 2){
                $('#regist').addClass('active')
                $('a[href=#regist]').parent().addClass('active')
            }

            $('.tip').on('click','a',function(e){
                e.preventDefault();
                e.stopPropagation();
                var id = $(this).attr('href');
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
                $(id).addClass('active');
                $(id).siblings().removeClass('active');
            })
            $('.check_box_btn').click(function(e){
                e.preventDefault();
                e.stopPropagation();
                $(this).toggleClass('active');
            })
        })

    </script>
    <!--[if IE 9]>
    <script src="static/js/ie9_input.js"  type="text/javascript"></script>
    <![endif]-->
</body>                                                                                                                                            
</html>